<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta name="referrer" content="no-referrer"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>☆☆☆== hexo-常用语法 ==☆☆☆ | 扣小妖</title><meta name="author" content="扣小妖"><meta name="copyright" content="扣小妖"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="markdown基本语法    元素 markdown语法    标题 # H1标题内容  ## H2标题内容  ### H3标题内容   粗体  ***bold text***   斜体 *italicized text*   引用块 &gt; blockquote   有序列表 1. First item 2. Second item3. Third item   无序列表 - First i">
<meta property="og:type" content="article">
<meta property="og:title" content="☆☆☆&#x3D;&#x3D; hexo-常用语法 &#x3D;&#x3D;☆☆☆">
<meta property="og:url" content="http://liukuaizhuan.gitee.io/posts/faa48056.html">
<meta property="og:site_name" content="扣小妖">
<meta property="og:description" content="markdown基本语法    元素 markdown语法    标题 # H1标题内容  ## H2标题内容  ### H3标题内容   粗体  ***bold text***   斜体 *italicized text*   引用块 &gt; blockquote   有序列表 1. First item 2. Second item3. Third item   无序列表 - First i">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p.ananas.chaoxing.com/star3/origin/26b76ef792809782fbcee1ca60afdbf8.png">
<meta property="article:published_time" content="2022-12-08T07:58:09.000Z">
<meta property="article:modified_time" content="2023-01-13T14:29:47.467Z">
<meta property="article:author" content="扣小妖">
<meta property="article:tag" content="hexo相关">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p.ananas.chaoxing.com/star3/origin/26b76ef792809782fbcee1ca60afdbf8.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://liukuaizhuan.gitee.io/posts/faa48056"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://gcore.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://gcore.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '☆☆☆== hexo-常用语法 ==☆☆☆',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-01-13 22:29:47'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.2"><script src="/assets/js/DPlayer.min.js"></script></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://p.ananas.chaoxing.com/star3/origin/c6eb667caaea4b46a934d65b6a348821.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-heartbeat"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://p.ananas.chaoxing.com/star3/origin/26b76ef792809782fbcee1ca60afdbf8.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">扣小妖</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-heartbeat"></i><span> 清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">☆☆☆== hexo-常用语法 ==☆☆☆</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="fa-fw post-meta-icon far fa-calendar-alt"></i><span class="post-meta-label">发表于</span><time datetime="2022-12-08T07:58:09.000Z" title="发表于 2022-12-08 15:58:09">2022-12-08</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/hexo/">hexo</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="☆☆☆== hexo-常用语法 ==☆☆☆"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="markdown基本语法"><a href="#markdown基本语法" class="headerlink" title="markdown基本语法"></a>markdown基本语法</h1><hr>
<table>
<thead>
<tr>
<th align="left">元素</th>
<th align="left">markdown语法</th>
</tr>
</thead>
<tbody><tr>
<td align="left">标题</td>
<td align="left"><code># H1标题内容</code> <br> <code>## H2标题内容 </code><br> <code>### H3标题内容</code></td>
</tr>
<tr>
<td align="left">粗体</td>
<td align="left"><code> ***bold text***</code></td>
</tr>
<tr>
<td align="left">斜体</td>
<td align="left"><code>*italicized text*</code></td>
</tr>
<tr>
<td align="left">引用块</td>
<td align="left"><code>&gt; blockquote</code></td>
</tr>
<tr>
<td align="left">有序列表</td>
<td align="left"><code>1. First item</code><br> <code>2. Second item</code><br><code>3. Third item</code></td>
</tr>
<tr>
<td align="left">无序列表</td>
<td align="left"><code>- First item</code><br><code>- Second item</code><br><code>- Third item</code></td>
</tr>
<tr>
<td align="left">代码（Code）</td>
<td align="left"><code>   `code`</code></td>
</tr>
<tr>
<td align="left">分隔线</td>
<td align="left"><code>---</code></td>
</tr>
<tr>
<td align="left">链接（Link）</td>
<td align="left"><code>    [title](https://www.example.com)</code></td>
</tr>
<tr>
<td align="left">图片（Image）</td>
<td align="left"><code>    ![alt text](image.jpg)</code></td>
</tr>
<tr>
<td align="left">tab制表符</td>
<td align="left"><code>&amp;emsp;</code></td>
</tr>
</tbody></table>
<h1 id="扩展语法"><a href="#扩展语法" class="headerlink" title="扩展语法"></a>扩展语法</h1><hr>
<table>
<thead>
<tr>
<th align="left">元素</th>
<th align="left">语法</th>
</tr>
</thead>
<tbody><tr>
<td align="left">代码块</td>
<td align="left">```  <code>&#123;   &quot;firstName&quot;: &quot;John&quot;,   &quot;lastName&quot;: &quot;Smith&quot;,   &quot;age&quot;: 25 &#125;</code>     ```</td>
</tr>
<tr>
<td align="left">脚注</td>
<td align="left"><code>Here&#39;s a sentence with a footnote. [^1] [^1]: This is the footnote.  </code></td>
</tr>
<tr>
<td align="left">标题编号</td>
<td align="left"><code>### My Great Heading &#123;#custom-id&#125;   </code></td>
</tr>
<tr>
<td align="left">定义列表</td>
<td align="left"><code>term : definition  </code></td>
</tr>
<tr>
<td align="left">删除线</td>
<td align="left"><code>~~The world is flat.~~  </code></td>
</tr>
<tr>
<td align="left">任务列表</td>
<td align="left"><code>- [x] Write the press release - [ ] Update the website - [ ] Contact the media  </code></td>
</tr>
</tbody></table>
<hr>
<h1 id="表格语法"><a href="#表格语法" class="headerlink" title="表格语法"></a>表格语法</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">| 元素 | 语法</span><br><span class="line">---|---</span><br><span class="line">表头|xxx</span><br><span class="line">xxx]xxx</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="按钮样式"><a href="#按钮样式" class="headerlink" title="按钮样式"></a>按钮样式</h1><h2 id="lnline"><a href="#lnline" class="headerlink" title="lnline"></a>lnline</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,,outline%&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>This is my website, click the button <a class="btn-beautify " target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><span>Butterfly</span></a><br>This is my website, click the button <a class="btn-beautify outline" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><span>Butterfly</span></a></p>
<h2 id="Block"><a href="#Block" class="headerlink" title="Block"></a>Block</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block larger %&#125;</span><br><span class="line">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block center larger %&#125;</span><br><span class="line">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block right blue larger %&#125;</span><br></pre></td></tr></table></figure>
<a class="btn-beautify block larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify block center larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify block right blue larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>

<h2 id="option"><a href="#option" class="headerlink" title="option"></a>option</h2><blockquote>
<p><em><strong>按钮样式一</strong></em> more than one button in center</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,green larger %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<div class="btn-center">
<a class="btn-beautify larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify blue larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify pink larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify red larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify purple larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify orange larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify green larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
</div>

<blockquote>
<p><em><strong>按钮样式二</strong></em></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline green larger %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<div class="btn-center">
<a class="btn-beautify outline larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline blue larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline pink larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline red larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline purple larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline orange larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
<a class="btn-beautify outline green larger" target="_blank" rel="noopener" href="https://butterfly.js.org" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a>
</div>


<h1 id="引用样式"><a href="#引用样式" class="headerlink" title="引用样式"></a>引用样式</h1><hr>
<h2 id="默认-方法一"><a href="#默认-方法一" class="headerlink" title="默认 - 方法一"></a>默认 - 方法一</h2><h3 id="左边框-无背景模式"><a href="#左边框-无背景模式" class="headerlink" title="左边框+无背景模式"></a>左边框+无背景模式</h3><div class="note simple"><p>默认 提示块标签</p>
</div>

<div class="note default simple"><p>default 提示块标签</p>
</div>

<div class="note primary simple"><p>primary 提示块标签</p>
</div>

<div class="note success simple"><p>success 提示块标签</p>
</div>

<div class="note info simple"><p>info 提示块标签</p>
</div>

<div class="note warning simple"><p>warning 提示块标签</p>
</div>

<div class="note danger simple"><p>danger 提示块标签</p>
</div> 
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;</span><br><span class="line">默认 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default simple %&#125;</span><br><span class="line">default 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary simple %&#125;</span><br><span class="line">primary 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success simple %&#125;</span><br><span class="line">success 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info simple %&#125;</span><br><span class="line">info 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning simple %&#125;</span><br><span class="line">warning 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger simple %&#125;</span><br><span class="line">danger 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="有边框-背景模式"><a href="#有边框-背景模式" class="headerlink" title="有边框+背景模式"></a>有边框+背景模式</h3><div class="note flat"><p>默认 提示块标签</p>
</div>

<div class="note default flat"><p>default 提示块标签</p>
</div>

<div class="note primary flat"><p>primary 提示块标签</p>
</div>

<div class="note success flat"><p>success 提示块标签</p>
</div>

<div class="note info flat"><p>info 提示块标签</p>
</div>

<div class="note warning flat"><p>warning 提示块标签</p>
</div>

<div class="note danger flat"><p>danger 提示块标签</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&#123;% note flat %&#125;</span><br><span class="line">默认 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default flat %&#125;</span><br><span class="line">default 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary flat %&#125;</span><br><span class="line">primary 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success flat %&#125;</span><br><span class="line">success 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info flat %&#125;</span><br><span class="line">info 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning flat %&#125;</span><br><span class="line">warning 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger flat %&#125;</span><br><span class="line">danger 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<hr>
<h3 id="无边框-背景模式"><a href="#无边框-背景模式" class="headerlink" title="无边框+背景模式"></a>无边框+背景模式</h3><div class="note modern"><p>默认 提示块标签</p>
</div>

<div class="note default modern"><p>default 提示块标签</p>
</div>

<div class="note primary modern"><p>primary 提示块标签</p>
</div>

<div class="note success modern"><p>success 提示块标签</p>
</div>

<div class="note info modern"><p>info 提示块标签</p>
</div>

<div class="note warning modern"><p>warning 提示块标签</p>
</div>

<div class="note danger modern"><p>danger 提示块标签</p>
</div>


<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note modern %&#125;</span><br><span class="line">默认 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default modern %&#125;</span><br><span class="line">default 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary modern %&#125;</span><br><span class="line">primary 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success modern %&#125;</span><br><span class="line">success 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info modern %&#125;</span><br><span class="line">info 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning modern %&#125;</span><br><span class="line">warning 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger modern %&#125;</span><br><span class="line">danger 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="无边框-无背景模式"><a href="#无边框-无背景模式" class="headerlink" title="无边框+无背景模式"></a>无边框+无背景模式</h3><div class="note disabled"><p>默认 提示块标签</p>
</div>

<div class="note default disabled"><p>default 提示块标签</p>
</div>

<div class="note primary disabled"><p>primary 提示块标签</p>
</div>

<div class="note success disabled"><p>success 提示块标签</p>
</div>

<div class="note info disabled"><p>info 提示块标签</p>
</div>

<div class="note warning disabled"><p>warning 提示块标签</p>
</div>

<div class="note danger disabled"><p>danger 提示块标签</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note disabled %&#125;</span><br><span class="line">默认 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default disabled %&#125;</span><br><span class="line">default 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary disabled %&#125;</span><br><span class="line">primary 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success disabled %&#125;</span><br><span class="line">success 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info disabled %&#125;</span><br><span class="line">info 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning disabled %&#125;</span><br><span class="line">warning 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger disabled %&#125;</span><br><span class="line">danger 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="左侧无图标模式"><a href="#左侧无图标模式" class="headerlink" title="左侧无图标模式"></a>左侧无图标模式</h3><div class="note no-icon flat"><p>默认 提示块标签</p>
</div>

<div class="note default no-icon flat"><p>default 提示块标签</p>
</div>

<div class="note primary no-icon flat"><p>primary 提示块标签</p>
</div>

<div class="note success no-icon flat"><p>success 提示块标签</p>
</div>

<div class="note info no-icon flat"><p>info 提示块标签</p>
</div>

<div class="note warning no-icon flat"><p>warning 提示块标签</p>
</div>

<div class="note danger no-icon flat"><p>danger 提示块标签</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;</span><br><span class="line">默认 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default no-icon %&#125;</span><br><span class="line">default 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary no-icon %&#125;</span><br><span class="line">primary 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success no-icon %&#125;</span><br><span class="line">success 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info no-icon %&#125;</span><br><span class="line">info 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning no-icon %&#125;</span><br><span class="line">warning 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger no-icon %&#125;</span><br><span class="line">danger 提示块标签</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<hr>
<h2 id="自定义-方法二"><a href="#自定义-方法二" class="headerlink" title="自定义 - 方法二"></a>自定义 - 方法二</h2><h3 id="图标-简单模式"><a href="#图标-简单模式" class="headerlink" title="图标 简单模式"></a>图标 简单模式</h3><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p>
</div>
<div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p>
</div>
<div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p>
</div>
<div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p>
</div>
<div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;</span><br><span class="line">2021年快到了....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;</span><br><span class="line">小心开车 安全至上</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; simple%&#125;</span><br><span class="line">这是三片呢？还是四片？</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;</span><br><span class="line">剪刀石头布</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="图标-纯背景"><a href="#图标-纯背景" class="headerlink" title="图标 纯背景"></a>图标 纯背景</h3><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p>
</div>
<div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p>
</div>
<div class="note red icon-padding modern"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p>
</div>
<div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p>
</div>
<div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;</span><br><span class="line">2021年快到了....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;</span><br><span class="line">小心开车 安全至上</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; modern%&#125;</span><br><span class="line">这是三片呢？还是四片？</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;</span><br><span class="line">剪刀石头布</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="图标-边框-背景"><a href="#图标-边框-背景" class="headerlink" title="图标 边框+背景"></a>图标 边框+背景</h3><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p>
</div>
<div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p>
</div>
<div class="note red icon-padding flat"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p>
</div>
<div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p>
</div>
<div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;</span><br><span class="line">2021年快到了....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;</span><br><span class="line">小心开车 安全至上</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; flat%&#125;</span><br><span class="line">这是三片呢？还是四片？</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;</span><br><span class="line">剪刀石头布</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h3 id="图标-无背景"><a href="#图标-无背景" class="headerlink" title="图标 无背景"></a>图标 无背景</h3><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021年快到了….</p>
</div>
<div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p>
</div>
<div class="note red icon-padding disabled"><i class="note-icon fas fa-fan"></i><p>这是三片呢？还是四片？</p>
</div>
<div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p>
</div>
<div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p>
</div>
<div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;</span><br><span class="line">2021年快到了....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;</span><br><span class="line">小心开车 安全至上</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; disabled %&#125;</span><br><span class="line">这是三片呢？还是四片？</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;</span><br><span class="line">你是刷 Visa 还是 UnionPay</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;</span><br><span class="line">剪刀石头布</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;</span><br><span class="line">前端最讨厌的浏览器</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="Gallery相册"><a href="#Gallery相册" class="headerlink" title="Gallery相册"></a>Gallery相册</h1><p>新的Gallery相册会自动根据图片长度进行排版，书写也更加方便，与markdown格式一样。可根据需要插入到相应的md。<br>就是一个普通的页面，你只需要hexo n page xxxxx 创建你的页面就行</p>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure>

<h2 id="演示"><a href="#演示" class="headerlink" title="演示"></a>演示</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure>
<div class="fj-gallery"><p><img src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"><br><img src="https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg"><br><img src="https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg"><br><img src="https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg"><br><img src="https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg"><br><img src="https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg"><br><img src="https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg"></p>
          </div>
<hr>
<h1 id="Gallery相册图库"><a href="#Gallery相册图库" class="headerlink" title="Gallery相册图库"></a>Gallery相册图库</h1><p>页面只是普通的页面，你只需要hexo n page xxxxx 创建你的页面就行</p>
<p>然后使用标签外挂 galleryGroup，具体用法请查看对应的内容。 </p>
<h2 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ul>
<li>name：图库名字</li>
<li>description：图库描述</li>
<li>link：连接到对应相册的地址  （自己创建一个页面，页面里面填写【Gallery相册】语法）</li>
<li>img-url：图库封面的地址</li>
</ul>
<h2 id="演示-1"><a href="#演示-1" class="headerlink" title="演示"></a>演示</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">## 演示</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup &#x27;壁纸&#x27; &#x27;收藏的一些壁纸&#x27; &#x27;/photos/bizhi.html&#x27; https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;漫威&#x27; &#x27;关于漫威的图片&#x27; &#x27;/photos/manwei.html&#x27; https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;OH MY GIRL&#x27; &#x27;关于OH MY GIRL的图片&#x27; &#x27;/photos/bizhi.html&#x27; https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<div class="gallery-group-main">

  <figure class="gallery-group">
  <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">壁纸</div>
  <p>收藏的一些壁纸</p>
  <a href='/photos/bizhi.html'></a>
  </figcaption>
  </figure>
  

  <figure class="gallery-group">
  <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg' alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">漫威</div>
  <p>关于漫威的图片</p>
  <a href='/photos/manwei.html'></a>
  </figcaption>
  </figure>
  

  <figure class="gallery-group">
  <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg' alt="Group Image Gallery">
  <figcaption>
  <div class="gallery-group-name">OH MY GIRL</div>
  <p>关于OH MY GIRL的图片</p>
  <a href='/photos/bizhi.html'></a>
  </figcaption>
  </figure>
  
</div>

<hr>
<h1 id="Tabs选项卡"><a href="#Tabs选项卡" class="headerlink" title="Tabs选项卡"></a>Tabs选项卡</h1><div class="tabs" id="test4"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test4-1">第一个Tab</button></li><li class="tab"><button type="button" data-href="#test4-2">第2个标签</button></li><li class="tab"><button type="button" data-href="#test4-3"><i class="fas fa-bomb"></i>炸弹 我是带图标的</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab名字为第一个Tab内容</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有Tab名字内容</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon内容</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>


<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test4 %&#125;</span><br><span class="line">&lt;!-- tab 第一个Tab --&gt;</span><br><span class="line"><span class="strong">**tab名字为第一个Tab内容**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab 第2个标签 --&gt;</span><br><span class="line"><span class="strong">**只有图标 没有Tab名字内容**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab 炸弹 我是带图标的@fas fa-bomb --&gt;</span><br><span class="line"><span class="strong">**名字+icon内容**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="mermaid各种图标"><a href="#mermaid各种图标" class="headerlink" title="mermaid各种图标"></a>mermaid各种图标</h1><p>使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a target="_blank" rel="noopener" href="https://mermaid-js.github.io/mermaid/#/">mermaid文档</a></p>
<h2 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">内容</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure>

<h2 id="演示-2"><a href="#演示-2" class="headerlink" title="演示"></a>演示</h2><div class="mermaid-wrap"><pre class="mermaid-src" hidden>
  pie
    title Key elements in Product X
    &quot;Calcium&quot; : 42.96
    &quot;Potassium&quot; : 50.05
    &quot;Magnesium&quot; : 10.01
    &quot;Iron&quot; :  5
  </pre></div>

<hr>
<h1 id="隐藏显示-tag-hide"><a href="#隐藏显示-tag-hide" class="headerlink" title="隐藏显示 tag-hide"></a>隐藏显示 tag-hide</h1><p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。</p>
<div class="tabs" id="1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#1-1">inline【点击按钮显示隐藏文本】</button></li><li class="tab"><button type="button" data-href="#1-2">block【隐藏块】</button></li><li class="tab"><button type="button" data-href="#1-3">Toggle【隐藏在收缩框里】</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="1-1"><p><code>inline</code> 在文本里面添加按钮隐藏内容，只限文字</p>
<p>( <code>content</code>不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideInline content,display,bg,color %&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">content: 文本内容 </span><br><span class="line">display: 按钮显示的文字(可选) </span><br><span class="line">bg: 按钮的背景颜色(可选) </span><br><span class="line">color: 按钮文字的颜色(可选)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>演示</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">哪个英文字母最酷？ &#123;% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %&#125;</span><br><span class="line"></span><br><span class="line">门里站着一个人? &#123;% hideInline 闪 %&#125;</span><br></pre></td></tr></table></figure>
<p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">查看答案<br>  </button><span class="hide-content">因为西装裤(C装酷)</span></span></p>
<p>门里站着一个人? <span class="hide-inline"><button type="button" class="hide-button" style="">Click<br>  </button><span class="hide-content">闪</span></span></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="1-2"><p><code>block</code>独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等</p>
<p>( <code>display</code> 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br><span class="line"></span><br><span class="line">content: 文本内容</span><br><span class="line">display: 按钮显示的文字(可选)</span><br><span class="line">bg: 按钮的背景颜色(可选)</span><br><span class="line">color: 按钮文字的颜色(可选)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>演示</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">查看答案</span><br><span class="line">&#123;% hideBlock 查看答案 %&#125;</span><br><span class="line">傻子，怎么可能有答案</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure>
<p>查看答案</p>
<div class="hide-block"><button type="button" class="hide-button" style="">查看答案
    </button><div class="hide-content"><p>傻子，怎么可能有答案</p>
</div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="1-3"><p>如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。</p>
<p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>) </p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>演示</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle Butterfly安装方法 %&#125;</span><br><span class="line">在你的博客根目录里</span><br><span class="line"></span><br><span class="line">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">如果想要安装比较新的dev分支，可以</span><br><span class="line"></span><br><span class="line">git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">&#123;% endhideToggle %&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<details class="toggle" ><summary class="toggle-button" style="">Butterfly安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p>
<p>git clone -b master <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p>
<p>如果想要安装比较新的dev分支，可以</p>
<p>git clone -b dev <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p>
</div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="时间轴-timeline"><a href="#时间轴-timeline" class="headerlink" title="时间轴(timeline)"></a>时间轴(timeline)</h1><h2 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">解释</th>
</tr>
</thead>
<tbody><tr>
<td align="left">title</td>
<td align="left">标题/时间线</td>
</tr>
<tr>
<td align="left">color</td>
<td align="left">timeline 颜色</td>
</tr>
<tr>
<td align="left">default(留空)</td>
<td align="left">/ blue / pink / red / purple / orange / green</td>
</tr>
</tbody></table>
<h2 id="默认颜色"><a href="#默认颜色" class="headerlink" title="默认颜色"></a>默认颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline undefined"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>

<h2 id="blue颜色"><a href="#blue颜色" class="headerlink" title="blue颜色"></a>blue颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,blue %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline blue"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>


<h2 id="pink颜色"><a href="#pink颜色" class="headerlink" title="pink颜色"></a>pink颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,pink %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline pink"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>

<h2 id="red颜色"><a href="#red颜色" class="headerlink" title="red颜色"></a>red颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,red %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline red"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>


<h2 id="紫色颜色"><a href="#紫色颜色" class="headerlink" title="紫色颜色"></a>紫色颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,purple %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline purple"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>

<h2 id="orange颜色"><a href="#orange颜色" class="headerlink" title="orange颜色"></a>orange颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,orange %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline orange"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>

<h2 id="green-颜色"><a href="#green-颜色" class="headerlink" title="green 颜色"></a>green 颜色</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,green %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline green"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>

<hr>
<h1 id="iframe标签"><a href="#iframe标签" class="headerlink" title="iframe标签"></a>iframe标签</h1><p>要嵌入 iframe：</p>
<div class="note info simple"><p>代码</p>
</div>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% iframe url [width] [height] %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">参数说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">固定格式</td>
<td align="left"><code>&#123;% iframe 链接地址 宽度 高度 %&#125;</code></td>
</tr>
<tr>
<td align="left">url</td>
<td align="left">嵌入的网页链接</td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">宽度</td>
</tr>
<tr>
<td align="left">height</td>
<td align="left">高度</td>
</tr>
</tbody></table>
<blockquote>
<p>演示</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% iframe &#x27;https://butterfly.js.org/&#x27; 100% 300px %&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>演示引入网站</p>
</blockquote>
<iframe src="https://butterfly.js.org/" width="100%" height="300px" frameborder="0" loading="lazy" allowfullscreen></iframe>

<blockquote>
<p>演示引入超星视频直链 不太推荐，只是演示</p>
</blockquote>
<iframe src="https://s138.ananas.chaoxing.com/video/51/6e/5d/c13198119fd05ddc7c7966b6c20b7af7/sd.mp4" width="100%" height="500px" frameborder="0" loading="lazy" allowfullscreen></iframe>
<hr>
<h1 id="图像image"><a href="#图像image" class="headerlink" title="图像image"></a>图像image</h1><p>插入指定大小的图像。</p>
<p>1.语法</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&#123;% img [class样式名称] [img<span class="emphasis">_url] [width] [height] &#x27;&quot;title text&quot; &quot;alt text&quot;&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">演示代码</span></span><br><span class="line"><span class="emphasis">1、markdown语法中图片</span></span><br><span class="line"><span class="emphasis">![<span class="string">图片标题</span>](<span class="link">图片链接</span>)</span></span><br><span class="line"><span class="emphasis">![<span class="string">title</span>](<span class="link">https://p.ananas.chaoxing.com/star3/origin/4cd47764746e960da0bbd8e77ffc758d.png</span>)</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">2、最简单的图片</span></span><br><span class="line"><span class="emphasis">&#123;% img https://p.ananas.chaoxing.com/star3/origin/4cd47764746e960da0bbd8e77ffc758d.png %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">3、设置宽度，高度，标题 省略了样式</span></span><br><span class="line"><span class="emphasis">&#123;% img  https://p.ananas.chaoxing.com/star3/origin/4cd47764746e960da0bbd8e77ffc758d.png 300 250 &#x27;&quot;我是图片标题&quot; &quot;我是图片失效后显示的标题&quot;&#x27; %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">4、使用class样式，例如:插入的图片左侧对齐显示</span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span></span><br><span class="line"><span class="emphasis">   div .img_</span>left&#123;</span><br><span class="line"><span class="code">        float:left;</span></span><br><span class="line"><span class="code">    &#125;</span></span><br><span class="line"><span class="code">&lt;/style&gt;</span></span><br><span class="line"><span class="code">&lt;div style=&quot;height:300px;&quot;&gt; </span></span><br><span class="line"><span class="code">&#123;% img img_left https://p.ananas.chaoxing.com/star3/origin/756e99b35e2a2882abb13b06d390e519.png 400 300 %&#125;</span></span><br><span class="line"><span class="code">&lt;/div&gt; </span></span><br><span class="line"><span class="code">&lt;p style=&quot;clear:both&quot;&gt;&lt;/p&gt;</span></span><br><span class="line"><span class="code"></span></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">参数说明</th>
<th align="left">类型</th>
<th align="left">是否可省略</th>
</tr>
</thead>
<tbody><tr>
<td align="left">class样式名称</td>
<td align="left">css中的样式名</td>
<td align="left">字符串</td>
<td align="left">可省略</td>
</tr>
<tr>
<td align="left">img_url</td>
<td align="left">图片路径</td>
<td align="left">字符串</td>
<td align="left"><mark class="hl-label red">必须</mark> </td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">图片宽度</td>
<td align="left">数字</td>
<td align="left">可省略</td>
</tr>
<tr>
<td align="left">height</td>
<td align="left">图片高度</td>
<td align="left">数字</td>
<td align="left">可省略</td>
</tr>
<tr>
<td align="left">“title text”</td>
<td align="left">正常可以显示的图片，鼠标放在上面后显示的标题</td>
<td align="left">字符串</td>
<td align="left">可省略</td>
</tr>
<tr>
<td align="left">“alt text”</td>
<td align="left">图片失效后显示的文字标题</td>
<td align="left">字符串</td>
<td align="left">可省略</td>
</tr>
</tbody></table>
<p>2.演示代码  </p>
<img src="https://p.ananas.chaoxing.com/star3/origin/4cd47764746e960da0bbd8e77ffc758d.png" class="" width="300" height="250" title="我是图片标题" alt="我是图片失效后显示的标题">
<blockquote>
<p>图片左侧对齐显示，使用class样式定义</p>
</blockquote>
<style>
   div .img_left{
        float:left;
    }
</style>
<div style="height:300px;"> 
<img src="https://p.ananas.chaoxing.com/star3/origin/756e99b35e2a2882abb13b06d390e519.png" class="img_left" width="400" height="300">
</div> 
<p style="clear:both"></p>

<hr>
<h1 id="github徽章"><a href="#github徽章" class="headerlink" title="github徽章"></a>github徽章</h1><p>github徽章会生成一个图片 , 通过 <a target="_blank" rel="noopener" href="https://img.shields.io/">https://img.shields.io</a> 生成</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">https://img.shields.io/badge/[left_text]-[right_text]-[right_bgColor].svg</span><br><span class="line"></span><br><span class="line">调用：</span><br><span class="line">html图片调用</span><br><span class="line">&lt;img src=&#x27;https://img.shields.io/badge/[left_text]-[right_text]-[right_bgColor].svg&#x27;&gt;</span><br><span class="line"></span><br><span class="line">markdown调用</span><br><span class="line">![](https://img.shields.io/badge/[left_text]-[right_text]-[right_bgColor].svg) </span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">参数说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">[left_text]</td>
<td align="left">徽章左侧显示的文字</td>
</tr>
<tr>
<td align="left">[right_text]</td>
<td align="left">徽章右侧显示的文字</td>
</tr>
<tr>
<td align="left">[right_bgColor]</td>
<td align="left">徽章右侧显示的背景颜色 英文， #ccccc这种16进制的颜色不行</td>
</tr>
</tbody></table>
<p><strong>徽章演示</strong></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![<span class="string">徽章显示</span>](<span class="link">https://img.shields.io/badge/博客框架-HEXO-red.svg</span>) </span><br></pre></td></tr></table></figure>

<p><img src="https://img.shields.io/badge/%E5%8D%9A%E5%AE%A2%E6%A1%86%E6%9E%B6-HEXO-red.svg" alt="徽章显示"> </p>
<hr>
<h1 id="图标链接-友链或者下载链接"><a href="#图标链接-友链或者下载链接" class="headerlink" title="图标链接(友链或者下载链接)"></a>图标链接(友链或者下载链接)</h1><p>可以当做友情链接，也可以当做软件下载库进行下载使用的</p>
<h2 id="演示效果"><a href="#演示效果" class="headerlink" title="演示效果"></a>演示效果</h2><div class="flink"><div class="flink-name">友情链接</div><div class="flink-desc">那些人，那些事</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://butterfly.js.org/" title="butterfly主题" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="butterfly主题" />
              </div>
              <div class="flink-item-name">butterfly主题</div> 
              <div class="flink-item-desc" title="butterfly主题">butterfly主题</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://hexo.io/zh-tw/" title="Hexo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Hexo" />
              </div>
              <div class="flink-item-name">Hexo</div> 
              <div class="flink-item-desc" title="快速、简单且强大的网志框架">快速、简单且强大的网志框架</div>
            </a>
          </div></div><div class="flink-name">网站</div><div class="flink-desc">值得推荐的网站</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://www.youtube.com/" title="Youtube" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Youtube" />
              </div>
              <div class="flink-item-name">Youtube</div> 
              <div class="flink-item-desc" title="视频网站">视频网站</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://www.weibo.com/" title="Weibo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Weibo" />
              </div>
              <div class="flink-item-name">Weibo</div> 
              <div class="flink-item-desc" title="中国最大社交分享平台">中国最大社交分享平台</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://twitter.com/" title="Twitter" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Twitter" />
              </div>
              <div class="flink-item-name">Twitter</div> 
              <div class="flink-item-desc" title="社交分享平台">社交分享平台</div>
            </a>
          </div></div></div>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: 友情链接</span></span><br><span class="line"><span class="emphasis">  class_</span>desc: 那些人，那些事</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: butterfly主题</span></span><br><span class="line"><span class="emphasis">      link: https://butterfly.js.org/</span></span><br><span class="line"><span class="emphasis">      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line"><span class="emphasis">      descr: butterfly主题</span></span><br><span class="line"><span class="emphasis">    - name: Hexo</span></span><br><span class="line"><span class="emphasis">      link: https://hexo.io/zh-tw/</span></span><br><span class="line"><span class="emphasis">      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line"><span class="emphasis">      descr: 快速、简单且强大的网志框架</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: 网站</span><br><span class="line">  class<span class="emphasis">_desc: 值得推荐的网站</span></span><br><span class="line"><span class="emphasis">  link_</span>list:</span><br><span class="line"><span class="bullet">    -</span> name: Youtube</span><br><span class="line"><span class="code">      link: https://www.youtube.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="code">      descr: 视频网站</span></span><br><span class="line"><span class="code">    - name: Weibo</span></span><br><span class="line"><span class="code">      link: https://www.weibo.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="code">      descr: 中国最大社交分享平台</span></span><br><span class="line"><span class="code">    - name: Twitter</span></span><br><span class="line"><span class="code">      link: https://twitter.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="code">      descr: 社交分享平台</span></span><br><span class="line"><span class="code">&#123;% endflink %&#125;</span></span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">语法参数</th>
<th align="left">参数说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">class_name</td>
<td align="left">分类名称</td>
</tr>
<tr>
<td align="left">class_desc</td>
<td align="left">分类描述</td>
</tr>
<tr>
<td align="left">link_list:</td>
<td align="left">展示的列表 ，无参数</td>
</tr>
<tr>
<td align="left"><code>-</code> name</td>
<td align="left">分类下的其中一个显示的其中一个组件的名称</td>
</tr>
<tr>
<td align="left">link</td>
<td align="left">点击将要进入的链接，或者做下载站的时候下载链接</td>
</tr>
<tr>
<td align="left">avatar</td>
<td align="left">显示的链接图标或者下载工具的图标</td>
</tr>
<tr>
<td align="left">descr</td>
<td align="left">这个链接的描述 或者下载的软件的描述</td>
</tr>
</tbody></table>
<hr>
<h1 id="插入原生video标签视频"><a href="#插入原生video标签视频" class="headerlink" title="插入原生video标签视频"></a>插入原生video标签视频</h1><div class="tabs" id="video标签视频"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#video标签视频-1">使用方法</button></li><li class="tab"><button type="button" data-href="#video标签视频-2">示例代码</button></li><li class="tab"><button type="button" data-href="#video标签视频-3">手动魔改</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="video标签视频-1"><p>在markdown文档中使用 ，插入原生的video标签视频</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video url width height %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">说明</th>
<th align="left">级别</th>
</tr>
</thead>
<tbody><tr>
<td align="left">video</td>
<td align="left">固定标签字符串，无需改动，固定值video</td>
<td align="left"><mark class="hl-label red">必填</mark></td>
</tr>
<tr>
<td align="left">url</td>
<td align="left">视频直链</td>
<td align="left"><mark class="hl-label red">必填</mark></td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">视频宽度  ，单位 百分比或者px都可以 ，不填则默认100%</td>
<td align="left">选填</td>
</tr>
<tr>
<td align="left">height</td>
<td align="left">视频高度 ，单位 百分比或者px都可以 ，不填则默认500px</td>
<td align="left">选填</td>
</tr>
</tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="video标签视频-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 默认视频尺寸 100% * 500px</span><br><span class="line">&#123;% video https://s138.ananas.chaoxing.com/video/33/c1/59/3c2219849a80cbb2fb09fbf2d70b0f0d/sd.mp4 %&#125;  </span><br><span class="line"></span><br><span class="line">// 自定义视频宽和高</span><br><span class="line">&#123;% video https://s138.ananas.chaoxing.com/video/33/c1/59/3c2219849a80cbb2fb09fbf2d70b0f0d/sd.mp4 800px 400px %&#125; </span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="video标签视频-3"><p>butterfly主题中无此功能，需要自己魔改<br>手动创建<code>video.js</code> 文件，路径为：<code>themes/xxx/script/tag/video.js</code> 其中 <code>xxx</code>为主题文件夹名称<br>代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Butterfly</span></span><br><span class="line"><span class="comment"> * video 插入原生视频,语法：</span></span><br><span class="line"><span class="comment"> * &#123;% video url width height %&#125; 或者 &#123;% video url %&#125;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="meta">&#x27;use strict&#x27;</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">addVideo</span>(<span class="params">lists</span>)&#123;  </span><br><span class="line">    <span class="keyword">const</span> video_url = lists[<span class="number">0</span>] </span><br><span class="line">    <span class="keyword">const</span> width = lists[<span class="number">1</span>] || <span class="string">&#x27;100%&#x27;</span></span><br><span class="line">    <span class="keyword">const</span> height = lists[<span class="number">2</span>] || <span class="string">&#x27;500px&#x27;</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;video controls=&quot;controls&quot; controlsList=&quot;nodownload noplaybackrate&quot; disablePictureInPicture width=&quot;<span class="subst">$&#123;width&#125;</span>&quot; height=&quot;<span class="subst">$&#123;height&#125;</span>&quot;&gt;</span></span><br><span class="line"><span class="string">            &lt;source src=&quot;<span class="subst">$&#123;video_url&#125;</span>&quot; type=&quot;video/mp4&quot;&gt;</span></span><br><span class="line"><span class="string">        &lt;/video&gt; </span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;video&#x27;</span>, addVideo, &#123; <span class="attr">ends</span>: <span class="literal">false</span> &#125;)</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="插入dplayer视频"><a href="#插入dplayer视频" class="headerlink" title="插入dplayer视频"></a>插入dplayer视频</h1><h2 id="需要安装插件"><a href="#需要安装插件" class="headerlink" title="需要安装插件"></a>需要安装插件</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-dplayer --save</span><br></pre></td></tr></table></figure>

<h2 id="演示语法"><a href="#演示语法" class="headerlink" title="演示语法"></a>演示语法</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">普通视频链接格式：</span><br><span class="line">&#123;% dplayer key=value ... %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% dplayer &quot;url=视频链接&quot; &quot;pic=封面链接&quot; %&#125;</span><br><span class="line">  </span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">如果需要播放的视频链接为m3u8格式，可以在md文档最前面插入一行代码即可：</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/hls.js@latest&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>   </span><br><span class="line">注意：此代码页面最前面只需要插入一次即可,下面正常调用</span><br><span class="line">&#123;% dplayer &quot;url=视频链接&quot; &quot;pic=封面链接&quot; %&#125; </span><br><span class="line"></span><br><span class="line">演示：</span><br><span class="line">&#123;% dplayer &quot;url=https://vip.lz-cdn1.com/20221117/18417_09eead46/1200k/hls/mixed.m3u8&quot; &quot;pic=封面链接&quot; %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">key</th>
<th align="left">属性名称</th>
<th align="left">值类型</th>
</tr>
</thead>
<tbody><tr>
<td align="left">url</td>
<td align="left">视频链接</td>
<td align="left">字符串</td>
</tr>
<tr>
<td align="left">pic</td>
<td align="left">封面图片链接</td>
<td align="left">字符串</td>
</tr>
<tr>
<td align="left">thumbnails</td>
<td align="left">视频缩略图</td>
<td align="left">字符串</td>
</tr>
<tr>
<td align="left">autoplay</td>
<td align="left">视频自动播放</td>
<td align="left">bool</td>
</tr>
<tr>
<td align="left">loop</td>
<td align="left">视频循环播放</td>
<td align="left">bool</td>
</tr>
<tr>
<td align="left">hotkey</td>
<td align="left">开启热键，支持快进、快退、音量控制、播放暂停</td>
<td align="left">bool</td>
</tr>
<tr>
<td align="left">mutex</td>
<td align="left">互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器</td>
<td align="left">bool</td>
</tr>
<tr>
<td align="left">preload</td>
<td align="left">视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’</td>
<td align="left">‘auto’</td>
</tr>
<tr>
<td align="left">theme</td>
<td align="left">主题色</td>
<td align="left">‘#b7daff’</td>
</tr>
<tr>
<td align="left">logo</td>
<td align="left">在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置</td>
<td align="left">图片链接字符串</td>
</tr>
</tbody></table>
<blockquote>
<p>暂时不写了，先用这么多常用的，就这还用不完，官网<a target="_blank" rel="noopener" href="https://dplayer.diygod.dev/zh/guide.html#%E5%8F%82%E6%95%B0">https://dplayer.diygod.dev/zh/guide.html#%E5%8F%82%E6%95%B0</a> </p>
</blockquote>
<h2 id="语法案例"><a href="#语法案例" class="headerlink" title="语法案例"></a>语法案例</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% dplayer &quot;url=https://s138.ananas.chaoxing.com/video/16/59/27/ebf0b5c7a7358fbb2f98adf7dc564367/sd.mp4&quot; &quot;pic=http://home.ustc.edu.cn/~mmmwhy/GEM.jpg&quot; &quot;loop=yes&quot; &quot;theme=#FADFA3&quot; &quot;autoplay=false&quot;   %&#125;</span><br></pre></td></tr></table></figure>

<h2 id="视频演示"><a href="#视频演示" class="headerlink" title="视频演示"></a>视频演示</h2><div id="dplayer4" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom: 20px;"></div><script>(function(){var player = new DPlayer({"container":document.getElementById("dplayer4"),"logo":"http://home.ustc.edu.cn/~mmmwhy/GEM.jpg","video":{"url":"https://s138.ananas.chaoxing.com/video/16/59/27/ebf0b5c7a7358fbb2f98adf7dc564367/sd.mp4","pic":"http://home.ustc.edu.cn/~mmmwhy/GEM.jpg"}});window.dplayers||(window.dplayers=[]);window.dplayers.push(player);})()</script>

<hr>
<h1 id="插入layer弹窗遮罩视频"><a href="#插入layer弹窗遮罩视频" class="headerlink" title="插入layer弹窗遮罩视频"></a>插入layer弹窗遮罩视频</h1><div class="tabs" id="test4"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test4-1">手动代码实现</button></li><li class="tab"><button type="button" data-href="#test4-2">代码案例演示</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p>此代码为调用layer弹窗层，可以自定义实现layer的效果</p>
<p><code>此处代码为弹窗引入视频为案例</code></p>
<p>1.在markdown的页面最底下填写此代码，每个页面只插入一次</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;//cdn.staticfile.org/jquery/1.12.3/jquery.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;//cdn.staticfile.org/layer/3.5.1/layer.min.js&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span> </span><br><span class="line">function js<span class="emphasis">_method(obj)&#123;</span></span><br><span class="line"><span class="emphasis">      var videoUrl =  obj.getAttribute(&quot;data-url&quot;)</span></span><br><span class="line"><span class="emphasis">      var videoTitle = obj.innerHTML</span></span><br><span class="line"><span class="emphasis">      layer.open(&#123;</span></span><br><span class="line"><span class="emphasis">            type: 2,</span></span><br><span class="line"><span class="emphasis">            title: videoTitle ,</span></span><br><span class="line"><span class="emphasis">            area: [&#x27;850px&#x27;, &#x27;550px&#x27;], // 宽度，高度 可以自定义</span></span><br><span class="line"><span class="emphasis">            shade: 0.8,</span></span><br><span class="line"><span class="emphasis">            closeBtn: 1,</span></span><br><span class="line"><span class="emphasis">            shadeClose: true,</span></span><br><span class="line"><span class="emphasis">            content: videoUrl </span></span><br><span class="line"><span class="emphasis">        &#125;);</span></span><br><span class="line"><span class="emphasis">&#125; </span></span><br><span class="line"><span class="emphasis"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure>
<p>2.在需要插入a链接的地方 按照固定格式填写 （可以多个）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;javascript:;&#x27;</span> <span class="attr">onclick</span>=<span class="string">&#x27;js_method(this)&#x27;</span> <span class="attr">data-url</span>=<span class="string">&#x27;视频链接&#x27;</span>&gt;</span>显示的标题<span class="tag">&lt;/<span class="name">a</span>&gt;</span> </span><br></pre></td></tr></table></figure>
<p>这样就实现了 点击 a链接，弹出遮罩层窗口</p>
<p>更多使用技巧，可以进入官网 <a target="_blank" rel="noopener" href="https://layuion.com/layer/">https://layuion.com/layer/</a> 学习</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-2"><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;javascript:;&#x27;</span> <span class="attr">onclick</span>=<span class="string">&#x27;js_method(this)&#x27;</span> <span class="attr">data-url</span>=<span class="string">&#x27;https://s138.ananas.chaoxing.com/video/f0/d0/9e/5f047d769caf021e7e15ede12f4697c8/sd.mp4&#x27;</span>&gt;</span>演示案例：打开视频<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;javascript:;&#x27;</span> <span class="attr">onclick</span>=<span class="string">&#x27;js_method(this)&#x27;</span> <span class="attr">data-url</span>=<span class="string">&#x27;https://www.dafeimiao.cn/category/kecheng/page/6/&#x27;</span>&gt;</span>演示案例：打开网页<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line"> </span><br></pre></td></tr></table></figure>

<p><code>点击下面a链接，弹窗遮罩层窗口</code></p>
<p><a href='javascript:;' onclick='js_method(this)' data-url='https://s138.ananas.chaoxing.com/video/f0/d0/9e/5f047d769caf021e7e15ede12f4697c8/sd.mp4'>演示案例：打开视频</a><br> <a href='javascript:;' onclick='js_method(this)' data-url='https://www.dafeimiao.cn/category/kecheng/page/6/'>演示案例：打开网页</a> </p>
<script src="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
<script src="//cdn.staticfile.org/layer/3.5.1/layer.min.js"></script>
<script> 
function js_method(obj){
      var videoUrl =  obj.getAttribute("data-url")
      var videoTitle = obj.innerHTML
      layer.open({
            type: 2,
            title: videoTitle ,
            area: ['850px', '550px'], // 宽度，高度 可以自定义
            shade: 0.8,
            closeBtn: 1,
            shadeClose: true,
            content: videoUrl 
        });
} 
</script><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="特殊样式文本"><a href="#特殊样式文本" class="headerlink" title="特殊样式文本"></a>特殊样式文本</h1><h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p><code>注意： 电脑端有效果，手机端会失去效果</code></p>
<p>带 <u>下划线</u> 的文本；带 <emp>着重号</emp> 的文本；带 <wavy>波浪线</wavy> 的文本；带 <del>删除线</del> 的文本</p>
<p>键盘样式的文本：<kbd>⌘</kbd> + <kbd>D</kbd></p>
<p>密码样式的文本：<psw title="你知道的太多了">这里没有验证码</psw></p>
<p>选中文字显示内容：<blur title="你知道的太多了">模糊模糊模糊模糊模糊模糊</blur></p>
<h2 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h2><div class="tabs" id="文本操作"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#文本操作-1">使用方法</button></li><li class="tab"><button type="button" data-href="#文本操作-2">示例代码</button></li><li class="tab"><button type="button" data-href="#文本操作-3">底层手动魔改</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="文本操作-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% u 内容 %&#125;</span><br><span class="line">&#123;% emp 内容 %&#125;</span><br><span class="line">&#123;% wavy 内容 %&#125;</span><br><span class="line">&#123;% del 内容 %&#125;</span><br><span class="line">&#123;% kbd 内容 %&#125; </span><br><span class="line">&#123;% psw 内容 %&#125;</span><br><span class="line">&#123;% blur 内容 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="文本操作-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">带 &#123;% u 下划线 %&#125; 的文本；带 &#123;% emp 着重号 %&#125; 的文本；带 &#123;% wavy 波浪线 %&#125; 的文本；带 &#123;% del 删除线 %&#125; 的文本</span><br><span class="line"></span><br><span class="line">键盘样式的文本：&#123;% kbd ⌘ %&#125; + &#123;% kbd D %&#125;</span><br><span class="line"></span><br><span class="line">密码样式的文本：&#123;% psw 这里没有验证码 %&#125;</span><br><span class="line"></span><br><span class="line">选中文字显示内容：&#123;% blur 模糊模糊模糊模糊模糊模糊 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="文本操作-3"><p><mark class="hl-label red">注意：butterfly主题是不带此功能的，需要自己手动魔改</mark> </p>
<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">CSS部分 在themes/butterfly/source/css/_tags下创建inline-labels.styl </summary><div class="toggle-content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">del</span>,s &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#8e8e8e</span>;</span><br><span class="line">  <span class="attribute">text-decoration-color</span>: <span class="number">#8e8e8e</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">u &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#444</span>;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#fe5f58</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">emp &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#444</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">4px</span> dotted <span class="number">#fe5f58</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">wavy &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#444</span>;</span><br><span class="line">  <span class="attribute">text-decoration-style</span>: wavy;</span><br><span class="line">  <span class="attribute">text-decoration-line</span>: underline;</span><br><span class="line">  <span class="attribute">text-decoration-color</span>: <span class="number">#fe5f58</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">psw &#123;</span><br><span class="line">  <span class="attribute">color</span>: transparent;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#a1a1a1</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  <span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all .<span class="number">28s</span> ease</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">psw<span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#444</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">0</span> <span class="number">0</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="selector-tag">kbd</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">  <span class="attribute">font</span>: bold <span class="number">9pt</span> arial;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">2px</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#eff0f2</span>;</span><br><span class="line">  -moz-<span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">border-top</span>: <span class="number">1px</span> solid <span class="number">#f5f5f5</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">20px</span> <span class="number">#e8e8e8</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c3c3c3</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c9c9c9</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">#333</span>;</span><br><span class="line">  -moz-<span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">20px</span> <span class="number">#e8e8e8</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c3c3c3</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c9c9c9</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">#333</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">20px</span> <span class="number">#e8e8e8</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c3c3c3</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c9c9c9</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">#333</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">20px</span> <span class="number">#e8e8e8</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c3c3c3</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c9c9c9</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: inset <span class="number">0</span> <span class="number">0</span> <span class="number">20px</span> <span class="number">#e8e8e8</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c3c3c3</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#c9c9c9</span>,<span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> <span class="number">#f5f5f5</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> u,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> emp,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> wavy,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">del</span>,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> psw<span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">238</span>, <span class="number">238</span>, <span class="number">238</span>, <span class="number">0.871</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> blur &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#a1a1a1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">blur &#123;</span><br><span class="line">  <span class="attribute">text-shadow</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">7</span>) <span class="number">0</span> <span class="number">0</span> <span class="number">0.625rem</span>;</span><br><span class="line">  <span class="attribute">color</span>: transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details> 
<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">JS部分 在themes/butterfly/scripts/tag下创建inline-labels.js </summary><div class="toggle-content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;u&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;u&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/u&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;emp&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;emp&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/emp&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;wavy&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;wavy&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/wavy&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;del&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;del&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/del&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;kbd&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;kbd&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/kbd&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;psw&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;psw title=&quot;你知道的太多了&quot;&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/psw&gt;`</span>;</span><br><span class="line">&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;blur&#x27;</span>, <span class="keyword">function</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;blur title=&quot;你知道的太多了&quot;&gt;<span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&lt;/blur&gt;`</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="文字高亮-·-小标签"><a href="#文字高亮-·-小标签" class="headerlink" title="文字高亮 · 小标签"></a>文字高亮 · 小标签</h1><div class="tabs" id="文字·高亮·标签"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#文字·高亮·标签-1">文字高亮</button></li><li class="tab"><button type="button" data-href="#文字·高亮·标签-2">小标签</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="文字·高亮·标签-1"><p><code>注意:这是Butterfly主题自带样式</code> </p>
<p>高亮所需的文字</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% label text color %&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">解释</th>
</tr>
</thead>
<tbody><tr>
<td align="left">text</td>
<td align="left">文字</td>
</tr>
<tr>
<td align="left">color</td>
<td align="left">【可选】背景颜色，默认为 default  ， default/blue/pink/red/purple/orange/green</td>
</tr>
</tbody></table>
<blockquote>
<p>演示</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">臣亮言：&#123;% label 先帝 %&#125;创业未半，而&#123;% label 中道崩殂 blue %&#125;。今天下三分，&#123;% label 益州疲敝 pink %&#125;，此诚&#123;% label 危急存亡之秋 red %&#125;也！然侍衞之臣，不懈于内；&#123;% label 忠志之士 purple %&#125;，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。</span><br><span class="line">宫中、府中，俱为一体；陟罚臧否，不宜异同。若有&#123;% label 作奸 orange %&#125;、&#123;% label 犯科 green %&#125;，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</span><br></pre></td></tr></table></figure>
<p>臣亮言：<mark class="hl-label default">先帝</mark> 创业未半，而<mark class="hl-label blue">中道崩殂</mark> 。今天下三分，<mark class="hl-label pink">益州疲敝</mark> ，此诚<mark class="hl-label red">危急存亡之秋</mark> 也！然侍衞之臣，不懈于内；<mark class="hl-label purple">忠志之士</mark> ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br>宫中、府中，俱为一体；陟罚臧否，不宜异同。若有<mark class="hl-label orange">作奸</mark> 、<mark class="hl-label green">犯科</mark> ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="文字·高亮·标签-2"><p>  <code>注意：butterfly主题不带此功能，此功能是魔改出来的</code><br>  <code>注意： 电脑端有效果，手机端会失去效果</code><br>  <div class="tabs" id="小标签"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#小标签-1">使用方法</button></li><li class="tab"><button type="button" data-href="#小标签-2">演示</button></li><li class="tab"><button type="button" data-href="#小标签-3">底层手动魔改</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="小标签-1"><p><code>小标签</code></p></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border [颜色|方向加粗]&#x27;</span>&gt;</span></span>你的文字<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p><mark class="hl-label red">示例代码:</mark> </p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- note语法示例 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border green&#x27;</span>&gt;</span></span>绿色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border red&#x27;</span>&gt;</span></span>红色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border yellow&#x27;</span>&gt;</span></span>黄色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border grey&#x27;</span>&gt;</span></span>灰色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border blue&#x27;</span>&gt;</span></span>蓝色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- 小tag标签语法示例 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;inline-tag red&quot;</span>&gt;</span></span>红色小标签<span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;inline-tag green&quot;</span>&gt;</span></span>绿色小标签<span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;inline-tag blue&quot;</span>&gt;</span></span>蓝色小标签<span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;inline-tag yellow&quot;</span>&gt;</span></span>黄色小标签<span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;inline-tag grey&quot;</span>&gt;</span></span>灰色小标签<span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- 加粗案例 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&#x27;div-border green left right&#x27;</span>&gt;</span></span>绿色<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="小标签-2"><!-- note语法示例 -->
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

<!-- 小tag标签语法示例 -->
<p><span class="inline-tag red">红色小标签</span><br><span class="inline-tag green">绿色小标签</span><br><span class="inline-tag blue">蓝色小标签</span><br><span class="inline-tag yellow">黄色小标签</span><br><span class="inline-tag grey">灰色小标签</span></p>
<!-- 加粗案例 -->
<p class='div-border green left right'>绿色</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="小标签-3"><p><mark class="hl-label green">需要手动创建2个文件，分别为css和js</mark> </p>
<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">CSS部分：在themes/butterfly/source/css/_tags内创建文件span.styl</summary><div class="toggle-content"><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">span</span><span class="selector-class">.inline-tag</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.8</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">span</span><span class="selector-class">.inline-tag</span> &#123;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.7</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.inline-tag</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.2em</span> <span class="number">0.6em</span> <span class="number">0.3em</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">90%</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">  <span class="attribute">vertical-align</span>: baseline;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">0.1rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--Color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.font5</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">500</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">border-left-color</span>: <span class="number">#767676</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#f6f6f6</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.red</span>,</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.red</span> &#123;</span><br><span class="line">  <span class="attr">--Color</span>: <span class="built_in">rgb</span>(<span class="number">233</span>, <span class="number">30</span>, <span class="number">100</span>);</span><br><span class="line">  <span class="attr">--ColorA</span>: <span class="built_in">rgba</span>(<span class="number">233</span>, <span class="number">30</span>, <span class="number">100</span>, <span class="number">0.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.green</span>,</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.green</span> &#123;</span><br><span class="line">  <span class="attr">--Color</span>: <span class="built_in">rgb</span>(<span class="number">139</span>, <span class="number">195</span>, <span class="number">74</span>);</span><br><span class="line">  <span class="attr">--ColorA</span>: <span class="built_in">rgba</span>(<span class="number">139</span>, <span class="number">195</span>, <span class="number">74</span>, <span class="number">0.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.blue</span>,</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.blue</span> &#123;</span><br><span class="line">  <span class="attr">--Color</span>: <span class="built_in">rgb</span>(<span class="number">3</span>, <span class="number">169</span>, <span class="number">244</span>);</span><br><span class="line">  <span class="attr">--ColorA</span>: <span class="built_in">rgba</span>(<span class="number">3</span>, <span class="number">169</span>, <span class="number">244</span>, <span class="number">0.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.yellow</span>,</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.yellow</span> &#123;</span><br><span class="line">  <span class="attr">--Color</span>: <span class="built_in">rgb</span>(<span class="number">255</span>, <span class="number">193</span>, <span class="number">7</span>);</span><br><span class="line">  <span class="attr">--ColorA</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">193</span>, <span class="number">7</span>, <span class="number">0.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.grey</span>,</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.grey</span> &#123;</span><br><span class="line">  <span class="attr">--Color</span>: <span class="built_in">rgb</span>(<span class="number">76</span>, <span class="number">76</span>, <span class="number">76</span>);</span><br><span class="line">  <span class="attr">--ColorA</span>: <span class="built_in">rgba</span>(<span class="number">76</span>, <span class="number">76</span>, <span class="number">76</span>, <span class="number">0.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.div-border</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--Color, <span class="number">#333</span>);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">0.4rem</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--ColorA, transparent);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.left</span> &#123;</span><br><span class="line">  <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-left-color</span>: <span class="built_in">var</span>(--Color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.bottom</span> &#123;</span><br><span class="line">  <span class="attribute">border-bottom-width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-bottom-color</span>: <span class="built_in">var</span>(--Color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.right</span> &#123;</span><br><span class="line">  <span class="attribute">border-right-width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-right-color</span>: <span class="built_in">var</span>(--Color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-class">.top</span> &#123;</span><br><span class="line">  <span class="attribute">border-top-width</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">border-top-color</span>: <span class="built_in">var</span>(--Color);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details>
<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">JS部分：在themes\butterfly\scripts\tag内创建文件span.js</summary><div class="toggle-content"><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postP</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="regexp">/::/g</span>.<span class="title function_">test</span>(args))&#123;</span><br><span class="line">    args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;::&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">else</span>&#123;</span><br><span class="line">    args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> p0 = args[<span class="number">0</span>].<span class="title function_">trim</span>();</span><br><span class="line">  <span class="keyword">const</span> p1 = args[<span class="number">1</span>].<span class="title function_">trim</span>();</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;p class=&#x27;p <span class="subst">$&#123;p0&#125;</span>&#x27;&gt;<span class="subst">$&#123;p1&#125;</span>&lt;/p&gt;`</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postSpan</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="regexp">/::/g</span>.<span class="title function_">test</span>(args))&#123;</span><br><span class="line">    args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;::&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">else</span>&#123;</span><br><span class="line">    args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> p0 = args[<span class="number">0</span>].<span class="title function_">trim</span>();</span><br><span class="line">  <span class="keyword">const</span> p1 = args[<span class="number">1</span>].<span class="title function_">trim</span>();</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;span class=&#x27;p <span class="subst">$&#123;p0&#125;</span>&#x27;&gt;<span class="subst">$&#123;p1&#125;</span>&lt;/span&gt;`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;p&#x27;</span>, postP);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;span&#x27;</span>, postSpan);</span><br></pre></td></tr></table></figure></div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="复选框-·-单选框"><a href="#复选框-·-单选框" class="headerlink" title="复选框 · 单选框"></a>复选框 · 单选框</h1><p><code>注意： 电脑端有效果，手机端会失去效果</code></p>
<h2 id="示例-1"><a href="#示例-1" class="headerlink" title="示例"></a>示例</h2><div class="tabs" id="复选框-·-单选框"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#复选框-·-单选框-1">复选框 checkbox</button></li><li class="tab"><button type="button" data-href="#复选框-·-单选框-2">单选框 radio</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="复选框-·-单选框-1"><div class='checkbox'><input type="checkbox" />
            <p>纯文本测试</p>
            </div>
<div class='checkbox checked'><input type="checkbox" checked="checked"/>
            <p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p>
            </div>
<div class='checkbox red'><input type="checkbox" />
            <p>支持自定义颜色</p>
            </div>
<div class='checkbox green checked'><input type="checkbox" checked="checked"/>
            <p>绿色 + 默认选中</p>
            </div>
<div class='checkbox yellow checked'><input type="checkbox" checked="checked"/>
            <p>黄色 + 默认选中</p>
            </div>
<div class='checkbox cyan checked'><input type="checkbox" checked="checked"/>
            <p>青色 + 默认选中</p>
            </div>
<div class='checkbox blue checked'><input type="checkbox" checked="checked"/>
            <p>蓝色 + 默认选中</p>
            </div>
<div class='checkbox plus green checked'><input type="checkbox" checked="checked"/>
            <p>增加</p>
            </div>
<div class='checkbox minus yellow checked'><input type="checkbox" checked="checked"/>
            <p>减少</p>
            </div>
<div class='checkbox times red checked'><input type="checkbox" checked="checked"/>
            <p>叉</p>
            </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="复选框-·-单选框-2"><div class='checkbox'><input type="radio" />
            <p>纯文本测试</p>
            </div>
<div class='checkbox checked'><input type="radio" checked="checked"/>
            <p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p>
            </div>
<div class='checkbox red'><input type="radio" />
            <p>支持自定义颜色</p>
            </div>
<div class='checkbox green'><input type="radio" />
            <p>绿色</p>
            </div>
<div class='checkbox yellow'><input type="radio" />
            <p>黄色</p>
            </div>
<div class='checkbox cyan'><input type="radio" />
            <p>青色</p>
            </div>
<div class='checkbox blue'><input type="radio" />
            <p>蓝色</p>
            </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="使用方法-1"><a href="#使用方法-1" class="headerlink" title="使用方法"></a>使用方法</h2><div class="tabs" id="复选单选使用方法"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#复选单选使用方法-1">语法格式</button></li><li class="tab"><button type="button" data-href="#复选单选使用方法-2">底层魔改</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="复选单选使用方法-1"><p><mark class="hl-label red">注意：此功能butterfly主题没有，使用前请先魔改</mark><br>官方文档: <a target="_blank" rel="noopener" href="https://volantis.js.org/v5/tag-plugins/#checkbox">https://volantis.js.org/v5/tag-plugins/#checkbox</a><br><code>基本语法</code></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">值</th>
</tr>
</thead>
<tbody><tr>
<td align="left">颜色</td>
<td align="left">red, yellow, green, cyan, blue</td>
</tr>
<tr>
<td align="left">样式</td>
<td align="left">plus, minus, times</td>
</tr>
<tr>
<td align="left">选中状态</td>
<td align="left">checked</td>
</tr>
</tbody></table>
<p><code>复选框 checkbox 示例代码</code></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 纯文本测试 %&#125;</span><br><span class="line">&#123;% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% checkbox red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% checkbox green checked, 绿色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox yellow checked, 黄色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox cyan checked, 青色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox blue checked, 蓝色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox plus green checked, 增加 %&#125;</span><br><span class="line">&#123;% checkbox minus yellow checked, 减少 %&#125;</span><br><span class="line">&#123;% checkbox times red checked, 叉 %&#125;</span><br></pre></td></tr></table></figure>

<p><code>单选框 radio 示例代码</code></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 纯文本测试 %&#125;</span><br><span class="line">&#123;% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% radio red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% radio green, 绿色 %&#125;</span><br><span class="line">&#123;% radio yellow, 黄色 %&#125;</span><br><span class="line">&#123;% radio cyan, 青色 %&#125;</span><br><span class="line">&#123;% radio blue, 蓝色 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="复选单选使用方法-2"><p>需要提前魔改，之后在使用（魔改后重新启动hexo）</p>
<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">CSS部分</summary><div class="toggle-content"><p>在 <code>themes/butterfly/source/css/_tags</code>内 创建 <code>checkbox.styl </code>放入下面代码</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.checkbox</span> &#123;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.7</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  -webkit-appearance: none;</span><br><span class="line">  -moz-appearance: none;</span><br><span class="line">  -ms-appearance: none;</span><br><span class="line">  -o-appearance: none;</span><br><span class="line">  appearance: none;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.15s</span> ease-out <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">outline</span>: none;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">flex-shrink</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">7px</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-out;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">40deg</span>);</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">40deg</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">40deg</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">40deg</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">40deg</span>);</span><br><span class="line">  <span class="attribute">transition-delay</span>: <span class="number">0.25s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">7px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">6px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.minus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.minus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.minus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.minus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.plus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.plus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.plus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.plus</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.times</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.times</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">135deg</span>);</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.times</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.times</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.25s</span> ease-out;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.red</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#fe5f58</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.red</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fe5f58</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.red</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fe5f58</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.green</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#3dc550</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.green</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#3dc550</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.green</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#3dc550</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.yellow</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#ffbd2b</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.yellow</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffbd2b</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.yellow</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffbd2b</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.cyan</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#1bcdfc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.cyan</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#1bcdfc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.cyan</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#1bcdfc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.blue</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.blue</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;checkbox&quot;</span>]</span><span class="selector-pseudo">:checked</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span><span class="selector-class">.blue</span> <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;radio&quot;</span>]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.checkbox</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">2px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div></details>

<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">JS部分</summary><div class="toggle-content"><p>在 <code>themes\butterfly\scripts\tag</code> 内 创建 <code>checkbox.js</code> 放入下面代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postCheckbox</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">  <span class="keyword">var</span> cls = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">var</span> text = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">var</span> checked = <span class="literal">false</span></span><br><span class="line">  <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">1</span>) &#123;</span><br><span class="line">    cls = (args[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">    <span class="keyword">if</span> (cls.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      cls = <span class="string">&#x27; &#x27;</span> + cls</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (cls.<span class="title function_">indexOf</span>(<span class="string">&#x27;checked&#x27;</span>) &gt; -<span class="number">1</span>) &#123;</span><br><span class="line">      checked = <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">    text = (args[<span class="number">1</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    text = (args[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (text.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;div class=&#x27;checkbox<span class="subst">$&#123;cls&#125;</span>&#x27;&gt;&lt;input type=&quot;checkbox&quot; <span class="subst">$&#123; checked ? <span class="string">&#x27;checked=&quot;checked&quot;&#x27;</span> : <span class="string">&#x27;&#x27;</span> &#125;</span>/&gt;</span></span><br><span class="line"><span class="string">            <span class="subst">$&#123;hexo.render.renderSync(&#123;text: text, engine: <span class="string">&#x27;markdown&#x27;</span>&#125;).split(<span class="string">&#x27;\n&#x27;</span>).join(<span class="string">&#x27;&#x27;</span>)&#125;</span></span></span><br><span class="line"><span class="string">            &lt;/div&gt;`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postRadio</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">  <span class="keyword">var</span> cls = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">var</span> text = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">var</span> checked = <span class="literal">false</span></span><br><span class="line">  <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">1</span>) &#123;</span><br><span class="line">    cls = (args[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">    <span class="keyword">if</span> (cls.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      cls = <span class="string">&#x27; &#x27;</span> + cls</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (cls.<span class="title function_">indexOf</span>(<span class="string">&#x27;checked&#x27;</span>) &gt; -<span class="number">1</span>) &#123;</span><br><span class="line">      checked = <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">    text = (args[<span class="number">1</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    text = (args[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span>).<span class="title function_">trim</span>()</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (text.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;div class=&#x27;checkbox<span class="subst">$&#123;cls&#125;</span>&#x27;&gt;&lt;input type=&quot;radio&quot; <span class="subst">$&#123; checked ? <span class="string">&#x27;checked=&quot;checked&quot;&#x27;</span> : <span class="string">&#x27;&#x27;</span> &#125;</span>/&gt;</span></span><br><span class="line"><span class="string">            <span class="subst">$&#123;hexo.render.renderSync(&#123;text: text, engine: <span class="string">&#x27;markdown&#x27;</span>&#125;).split(<span class="string">&#x27;\n&#x27;</span>).join(<span class="string">&#x27;&#x27;</span>)&#125;</span></span></span><br><span class="line"><span class="string">            &lt;/div&gt;`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// &#123;% checkbox text %&#125;</span></span><br><span class="line"><span class="comment">// &#123;% checkbox checked, text %&#125;</span></span><br><span class="line"><span class="comment">// &#123;% checkbox color checked, text %&#125;</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;checkbox&#x27;</span>, postCheckbox);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;radio&#x27;</span>, postRadio);</span><br></pre></td></tr></table></figure></div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="富文本按钮"><a href="#富文本按钮" class="headerlink" title="富文本按钮"></a>富文本按钮</h1><p><code>注意： 电脑端有效果，手机端会失去效果</code></p>
<div class="tabs" id="富文本按钮"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#富文本按钮-1">演示</button></li><li class="tab"><button type="button" data-href="#富文本按钮-2">语法</button></li><li class="tab"><button type="button" data-href="#富文本按钮-3">示例代码</button></li><li class="tab"><button type="button" data-href="#富文本按钮-4">底层魔改</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="富文本按钮-1"><p>如果需要显示类似「团队成员」之类的一组含有头像的链接：</p>
<div class="btns circle grid5">
            <a target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a>
<a target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a>
<a target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a>
<a target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a>
<a target="_blank" rel="noopener" href='https://xaoxuu.com' title='xaoxuu'><img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a>
          </div>

<p>或者含有图标的按钮：</p>
<div class="btns rounded grid5">
            <a href='/' title='下载源码'><i class='fas fa-download'></i>下载源码</a>
<a href='/' title='查看文档'><i class='fas fa-book-open'></i>查看文档</a>
          </div>

<p> 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中<br> <div class="btns circle center grid5"><br>            <a target="_blank" rel="noopener" href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'><br>  <i class='fab fa-apple'></i><br>  <b>心率管家</b><br>  <p class='p red'>专业版</p><br>  <img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'><br></a><br><a target="_blank" rel="noopener" href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'><br>  <i class='fab fa-apple'></i><br>  <b>心率管家</b><br>  <p class='p green'>免费版</p><br>  <img src='https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'><br></a><br>          </div></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="富文本按钮-2"><p><code>基本语法</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns 样式参数 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure>
<p>官方文档: <a target="_blank" rel="noopener" href="https://volantis.js.org/v5/tag-plugins/#button">https://volantis.js.org/v5/tag-plugins/#button</a></p>
<blockquote>
<p>样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。</p>
</blockquote>
<p>圆角样式 : 默认方形</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rounded, circle</span><br></pre></td></tr></table></figure>

<p><strong>布局方式</strong><br>默认为自动宽度，适合视野内只有一两个的情况。</p>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="left">wide</td>
<td align="left">宽一点的按钮</td>
</tr>
<tr>
<td align="left">fill</td>
<td align="left">填充布局，自动铺满至少一行，多了会换行。</td>
</tr>
<tr>
<td align="left">center</td>
<td align="left">居中，按钮之间是固定间距。</td>
</tr>
<tr>
<td align="left">around</td>
<td align="left">居中分散</td>
</tr>
<tr>
<td align="left">grid2</td>
<td align="left">等宽最多 2 列，屏幕变窄会适当减少列数。</td>
</tr>
<tr>
<td align="left">grid3</td>
<td align="left">等宽最多 3 列，屏幕变窄会适当减少列数。</td>
</tr>
<tr>
<td align="left">grid4</td>
<td align="left">等宽最多 4 列，屏幕变窄会适当减少列数。</td>
</tr>
<tr>
<td align="left">grid5</td>
<td align="left">等宽最多 5 列，屏幕变窄会适当减少列数。</td>
</tr>
</tbody></table>
<p><strong>增加文字样式</strong></p>
<p>可以在容器内增加 <code>&lt;b&gt;标题&lt;/b&gt;</code> 和 <code>&lt;p&gt;描述文字&lt;/p&gt;</code></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="富文本按钮-3"><p>如果需要显示类似「团队成员」之类的一组含有头像的链接：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle grid5 %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure>

<p>或者含有图标的按钮：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns rounded grid5 %&#125;</span><br><span class="line">&#123;% cell 下载源码, /, fas fa-download %&#125;</span><br><span class="line">&#123;% cell 查看文档, /, fas fa-book-open %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure>

<p>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle center grid5 %&#125;</span><br><span class="line">&lt;a href=&#x27;https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1&#x27;&gt;</span><br><span class="line">  &lt;i class=&#x27;fab fa-apple&#x27;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;b&gt;心率管家&lt;/b&gt;</span><br><span class="line">  &#123;% p red, 专业版 %&#125;</span><br><span class="line">  &lt;img src=&#x27;https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png&#x27;&gt;</span><br><span class="line">&lt;/a&gt;</span><br><span class="line">&lt;a href=&#x27;https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1&#x27;&gt;</span><br><span class="line">  &lt;i class=&#x27;fab fa-apple&#x27;&gt;&lt;/i&gt;</span><br><span class="line">  &lt;b&gt;心率管家&lt;/b&gt;</span><br><span class="line">  &#123;% p green, 免费版 %&#125;</span><br><span class="line">  &lt;img src=&#x27;https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png&#x27;&gt;</span><br><span class="line">&lt;/a&gt;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure>

<p>如果需要显示类似「团队成员」之类的一组含有头像的链接：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle grid5 %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn目前主题最新版已经自带样式-assets/avatar/avatar.png %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure>

<p>或者含有图标的按钮：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns rounded grid5 %&#125;</span><br><span class="line">&#123;% cell 下载源码, /, fas fa-download %&#125;</span><br><span class="line">&#123;% cell 查看文档, /, fas fa-book-open %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="富文本按钮-4"><details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">CSS部分</summary><div class="toggle-content"><p>在 <code>themes\butterfly\scripts\tag</code> 内 创建文件  <code>btn.styl</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-class">.btns</span> &#123;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">brightness</span>(<span class="number">0.7</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> -<span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">overflow</span>: visible;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">p</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.8125rem</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#555</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.875rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.wide</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">padding-right</span>: <span class="number">32px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.fill</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">flex-grow</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.around</span> &#123;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-around;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.center</span> &#123;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid2</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">2</span> - <span class="number">16px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid2</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">2</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid2</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">2</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid2</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">1</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid3</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid3</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid3</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid3</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">1</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid4</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">4</span> - <span class="number">16px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid4</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid4</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid4</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">2</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid5</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">5</span> - <span class="number">16px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid5</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">4</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid5</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">3</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">500px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.grid5</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">2</span> - <span class="number">16px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="built_in">calc</span>(<span class="number">1.25</span> * <span class="number">16px</span> + <span class="number">32px</span>);</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: flex-start;</span><br><span class="line">  <span class="attribute">align-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#f6f6f6</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="number">0.28s</span> ease;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">64px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">64px</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">2px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">16px</span> <span class="number">8px</span> <span class="number">4px</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="built_in">calc</span>(-<span class="number">1.25</span> * <span class="number">16px</span> - <span class="number">32px</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">60px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">28px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child<span class="selector-class">.auto</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child<span class="selector-class">.auto</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2196f3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> <span class="selector-tag">p</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.25em</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.25</span>;</span><br><span class="line">  <span class="attribute">word-wrap</span>: break-word;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.4em</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-pseudo">:not</span>(<span class="selector-attr">[href]</span>) &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: default;</span><br><span class="line">  <span class="attribute">color</span>: inherit;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">87</span>, <span class="number">34</span>, <span class="number">0.15</span>);</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ff5722</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span> &gt; <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>) <span class="built_in">translateY</span>(-<span class="number">8px</span>);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">4px</span> <span class="number">8px</span> <span class="number">0</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span> <span class="selector-tag">a</span><span class="selector-attr">[href]</span><span class="selector-pseudo">:hover</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ff5722</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.circle</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.circle</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">32px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.rounded</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.btns</span><span class="selector-class">.rounded</span> <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</div></details>

<details class="toggle" style="border: 1px solid bg"><summary class="toggle-button" style="background-color: bg;color: color">JS部分</summary><div class="toggle-content"><p>在 <code>themes\butterfly\scripts\tag</code> 内 创建文件 <code>btn.js</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postBtns</span>(<span class="params">args, content</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;div class=&quot;btns <span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>&quot;&gt;</span></span><br><span class="line"><span class="string">            <span class="subst">$&#123;content&#125;</span></span></span><br><span class="line"><span class="string">          &lt;/div&gt;`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postCell</span>(<span class="params">args, content</span>) &#123;</span><br><span class="line">  args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">  <span class="keyword">let</span> text = args[<span class="number">0</span>] || <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">let</span> url = args[<span class="number">1</span>] || <span class="string">&#x27;&#x27;</span></span><br><span class="line">  text = text.<span class="title function_">trim</span>()</span><br><span class="line">  url = url.<span class="title function_">trim</span>()</span><br><span class="line">  <span class="keyword">if</span> (url.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    url = <span class="string">&quot;href=&#x27;&quot;</span> + url + <span class="string">&quot;&#x27;&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> icon = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">let</span> img = <span class="string">&#x27;https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/placeholder/d570170f4f12e1ee829ca0e85a7dffeb77343a.svg&#x27;</span></span><br><span class="line">  <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">2</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (args[<span class="number">2</span>].<span class="title function_">indexOf</span>(<span class="string">&#x27; fa-&#x27;</span>) &gt; -<span class="number">1</span>) &#123;</span><br><span class="line">      icon = args[<span class="number">2</span>].<span class="title function_">trim</span>()</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      img = args[<span class="number">2</span>].<span class="title function_">trim</span>()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (icon.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;a <span class="subst">$&#123;url&#125;</span> title=&#x27;<span class="subst">$&#123;text&#125;</span>&#x27;&gt;&lt;i class=&#x27;<span class="subst">$&#123;icon&#125;</span>&#x27;&gt;&lt;/i&gt;<span class="subst">$&#123;text&#125;</span>&lt;/a&gt;`</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;a <span class="subst">$&#123;url&#125;</span> title=&#x27;<span class="subst">$&#123;text&#125;</span>&#x27;&gt;&lt;img src=&#x27;<span class="subst">$&#123;img&#125;</span>&#x27;&gt;<span class="subst">$&#123;text&#125;</span>&lt;/a&gt;`</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;btns&#x27;</span>, postBtns, &#123;<span class="attr">ends</span>: <span class="literal">true</span>&#125;);</span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&#x27;cell&#x27;</span>, postCell);</span><br></pre></td></tr></table></figure></div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<hr>
<h1 id="文章设置密码"><a href="#文章设置密码" class="headerlink" title="文章设置密码"></a>文章设置密码</h1><p>添加 <code>password</code> 字段到文章信息头 <code>Front-matter</code>，该字段用于设置文章访问密码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hello World</span><br><span class="line">date: 2016-03-30 21:18:02</span><br><span class="line">password: hello</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p> <code>密码</code>就是 password 字段对应的值 <code>hello</code>）</p>
<blockquote>
<p>高级设置</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> ---</span><br><span class="line">title: Hello World</span><br><span class="line">date: 2016-03-30 21:12:21</span><br><span class="line">password: hello</span><br><span class="line">abstract: 用于设置加密文章显示的摘要</span><br><span class="line">message: 输入密码提示</span><br><span class="line">wrong_pass_message: 输入错误提示</span><br><span class="line">---</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="left">abstract</td>
<td align="left">用于设置加密文章显示的摘要。</td>
</tr>
<tr>
<td align="left">message</td>
<td align="left">输入密码提示。</td>
</tr>
<tr>
<td align="left">wrong_pass_message</td>
<td align="left">输入错误提示。</td>
</tr>
</tbody></table>
<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://liukuaizhuan.gitee.io">扣小妖</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://liukuaizhuan.gitee.io/posts/faa48056.html">http://liukuaizhuan.gitee.io/posts/faa48056.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本站所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/hexo%E7%9B%B8%E5%85%B3/">hexo相关</a></div><div class="post_share"><div class="social-share" data-image="https://p.ananas.chaoxing.com/star3/origin/26b76ef792809782fbcee1ca60afdbf8.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css" media="print" onload="this.media='all'"><script src="https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://p.ananas.chaoxing.com/star3/origin/5a01db3c5a0daca9fa2b024736bf66e3.png" target="_blank"><img class="post-qr-code-img" src="https://p.ananas.chaoxing.com/star3/origin/5a01db3c5a0daca9fa2b024736bf66e3.png" alt="微信打赏"/></a><div class="post-qr-code-desc">微信打赏</div></li><li class="reward-item"><a href="https://p.ananas.chaoxing.com/star3/origin/afffb275198370656cb6cef6a1107185.png" target="_blank"><img class="post-qr-code-img" src="https://p.ananas.chaoxing.com/star3/origin/afffb275198370656cb6cef6a1107185.png" alt="支付宝打赏"/></a><div class="post-qr-code-desc">支付宝打赏</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/4a17b156.html"><img class="prev-cover" src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">hexo基础操作</div></div></a></div><div class="next-post pull-right"><a href="/posts/b3973be2.html"><img class="next-cover" src="https://p.ananas.chaoxing.com/star3/origin/aabac151cc827272090f28644d2e2094.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">000.python-tkinter界面开发视频教程</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://p.ananas.chaoxing.com/star3/origin/c6eb667caaea4b46a934d65b6a348821.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">扣小妖</div><div class="author-info__description">Email：  liukuaizhuan@qq.com</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog 技术笔记</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#markdown%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="toc-number">1.</span> <span class="toc-text">markdown基本语法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E8%AF%AD%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">扩展语法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E8%AF%AD%E6%B3%95"><span class="toc-number">3.</span> <span class="toc-text">表格语法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8C%89%E9%92%AE%E6%A0%B7%E5%BC%8F"><span class="toc-number">4.</span> <span class="toc-text">按钮样式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#lnline"><span class="toc-number">4.1.</span> <span class="toc-text">lnline</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Block"><span class="toc-number">4.2.</span> <span class="toc-text">Block</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#option"><span class="toc-number">4.3.</span> <span class="toc-text">option</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E7%94%A8%E6%A0%B7%E5%BC%8F"><span class="toc-number">5.</span> <span class="toc-text">引用样式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4-%E6%96%B9%E6%B3%95%E4%B8%80"><span class="toc-number">5.1.</span> <span class="toc-text">默认 - 方法一</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A6%E8%BE%B9%E6%A1%86-%E6%97%A0%E8%83%8C%E6%99%AF%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.1.1.</span> <span class="toc-text">左边框+无背景模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%89%E8%BE%B9%E6%A1%86-%E8%83%8C%E6%99%AF%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.1.2.</span> <span class="toc-text">有边框+背景模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E8%BE%B9%E6%A1%86-%E8%83%8C%E6%99%AF%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.1.3.</span> <span class="toc-text">无边框+背景模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A0%E8%BE%B9%E6%A1%86-%E6%97%A0%E8%83%8C%E6%99%AF%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.1.4.</span> <span class="toc-text">无边框+无背景模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B7%A6%E4%BE%A7%E6%97%A0%E5%9B%BE%E6%A0%87%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.1.5.</span> <span class="toc-text">左侧无图标模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89-%E6%96%B9%E6%B3%95%E4%BA%8C"><span class="toc-number">5.2.</span> <span class="toc-text">自定义 - 方法二</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E6%A0%87-%E7%AE%80%E5%8D%95%E6%A8%A1%E5%BC%8F"><span class="toc-number">5.2.1.</span> <span class="toc-text">图标 简单模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E6%A0%87-%E7%BA%AF%E8%83%8C%E6%99%AF"><span class="toc-number">5.2.2.</span> <span class="toc-text">图标 纯背景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E6%A0%87-%E8%BE%B9%E6%A1%86-%E8%83%8C%E6%99%AF"><span class="toc-number">5.2.3.</span> <span class="toc-text">图标 边框+背景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E6%A0%87-%E6%97%A0%E8%83%8C%E6%99%AF"><span class="toc-number">5.2.4.</span> <span class="toc-text">图标 无背景</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Gallery%E7%9B%B8%E5%86%8C"><span class="toc-number">6.</span> <span class="toc-text">Gallery相册</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-number">6.1.</span> <span class="toc-text">语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA"><span class="toc-number">6.2.</span> <span class="toc-text">演示</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Gallery%E7%9B%B8%E5%86%8C%E5%9B%BE%E5%BA%93"><span class="toc-number">7.</span> <span class="toc-text">Gallery相册图库</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-1"><span class="toc-number">7.1.</span> <span class="toc-text">语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA-1"><span class="toc-number">7.2.</span> <span class="toc-text">演示</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Tabs%E9%80%89%E9%A1%B9%E5%8D%A1"><span class="toc-number">8.</span> <span class="toc-text">Tabs选项卡</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#mermaid%E5%90%84%E7%A7%8D%E5%9B%BE%E6%A0%87"><span class="toc-number">9.</span> <span class="toc-text">mermaid各种图标</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-2"><span class="toc-number">9.1.</span> <span class="toc-text">语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA-2"><span class="toc-number">9.2.</span> <span class="toc-text">演示</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%9A%90%E8%97%8F%E6%98%BE%E7%A4%BA-tag-hide"><span class="toc-number">10.</span> <span class="toc-text">隐藏显示 tag-hide</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E8%BD%B4-timeline"><span class="toc-number">11.</span> <span class="toc-text">时间轴(timeline)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95-3"><span class="toc-number">11.1.</span> <span class="toc-text">语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BB%98%E8%AE%A4%E9%A2%9C%E8%89%B2"><span class="toc-number">11.2.</span> <span class="toc-text">默认颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#blue%E9%A2%9C%E8%89%B2"><span class="toc-number">11.3.</span> <span class="toc-text">blue颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#pink%E9%A2%9C%E8%89%B2"><span class="toc-number">11.4.</span> <span class="toc-text">pink颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#red%E9%A2%9C%E8%89%B2"><span class="toc-number">11.5.</span> <span class="toc-text">red颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B4%AB%E8%89%B2%E9%A2%9C%E8%89%B2"><span class="toc-number">11.6.</span> <span class="toc-text">紫色颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#orange%E9%A2%9C%E8%89%B2"><span class="toc-number">11.7.</span> <span class="toc-text">orange颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#green-%E9%A2%9C%E8%89%B2"><span class="toc-number">11.8.</span> <span class="toc-text">green 颜色</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#iframe%E6%A0%87%E7%AD%BE"><span class="toc-number">12.</span> <span class="toc-text">iframe标签</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E5%83%8Fimage"><span class="toc-number">13.</span> <span class="toc-text">图像image</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#github%E5%BE%BD%E7%AB%A0"><span class="toc-number">14.</span> <span class="toc-text">github徽章</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E6%A0%87%E9%93%BE%E6%8E%A5-%E5%8F%8B%E9%93%BE%E6%88%96%E8%80%85%E4%B8%8B%E8%BD%BD%E9%93%BE%E6%8E%A5"><span class="toc-number">15.</span> <span class="toc-text">图标链接(友链或者下载链接)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA%E6%95%88%E6%9E%9C"><span class="toc-number">15.1.</span> <span class="toc-text">演示效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81"><span class="toc-number">15.2.</span> <span class="toc-text">代码</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E5%8E%9F%E7%94%9Fvideo%E6%A0%87%E7%AD%BE%E8%A7%86%E9%A2%91"><span class="toc-number">16.</span> <span class="toc-text">插入原生video标签视频</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E5%85%A5dplayer%E8%A7%86%E9%A2%91"><span class="toc-number">17.</span> <span class="toc-text">插入dplayer视频</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9C%80%E8%A6%81%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="toc-number">17.1.</span> <span class="toc-text">需要安装插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BC%94%E7%A4%BA%E8%AF%AD%E6%B3%95"><span class="toc-number">17.2.</span> <span class="toc-text">演示语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95%E6%A1%88%E4%BE%8B"><span class="toc-number">17.3.</span> <span class="toc-text">语法案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%86%E9%A2%91%E6%BC%94%E7%A4%BA"><span class="toc-number">17.4.</span> <span class="toc-text">视频演示</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E5%85%A5layer%E5%BC%B9%E7%AA%97%E9%81%AE%E7%BD%A9%E8%A7%86%E9%A2%91"><span class="toc-number">18.</span> <span class="toc-text">插入layer弹窗遮罩视频</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E6%A0%B7%E5%BC%8F%E6%96%87%E6%9C%AC"><span class="toc-number">19.</span> <span class="toc-text">特殊样式文本</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BA%E4%BE%8B"><span class="toc-number">19.1.</span> <span class="toc-text">示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">19.2.</span> <span class="toc-text">使用方法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E9%AB%98%E4%BA%AE-%C2%B7-%E5%B0%8F%E6%A0%87%E7%AD%BE"><span class="toc-number">20.</span> <span class="toc-text">文字高亮 · 小标签</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%8D%E9%80%89%E6%A1%86-%C2%B7-%E5%8D%95%E9%80%89%E6%A1%86"><span class="toc-number">21.</span> <span class="toc-text">复选框 · 单选框</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A4%BA%E4%BE%8B-1"><span class="toc-number">21.1.</span> <span class="toc-text">示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-1"><span class="toc-number">21.2.</span> <span class="toc-text">使用方法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%8C%89%E9%92%AE"><span class="toc-number">22.</span> <span class="toc-text">富文本按钮</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E8%AE%BE%E7%BD%AE%E5%AF%86%E7%A0%81"><span class="toc-number">23.</span> <span class="toc-text">文章设置密码</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/7f4a6eeb.html" title="013.c++核心编程-类和对象"><img src="https://p.ananas.chaoxing.com/star3/origin/7ea674ffcd12ef7d943d54c93e9203a4.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="013.c++核心编程-类和对象"/></a><div class="content"><a class="title" href="/posts/7f4a6eeb.html" title="013.c++核心编程-类和对象">013.c++核心编程-类和对象</a><time datetime="2023-02-13T14:55:03.000Z" title="发表于 2023-02-13 22:55:03">2023-02-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/4adebd64.html" title="012.C++核心编程-函数提高"><img src="https://p.ananas.chaoxing.com/star3/origin/b6c49bb4892ad191edbc0363caf45530.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="012.C++核心编程-函数提高"/></a><div class="content"><a class="title" href="/posts/4adebd64.html" title="012.C++核心编程-函数提高">012.C++核心编程-函数提高</a><time datetime="2023-02-13T14:51:24.000Z" title="发表于 2023-02-13 22:51:24">2023-02-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/bff12c11.html" title="011.C++核心编程-引用"><img src="https://p.ananas.chaoxing.com/star3/origin/86403540a7b572fec123890e9a638adc.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="011.C++核心编程-引用"/></a><div class="content"><a class="title" href="/posts/bff12c11.html" title="011.C++核心编程-引用">011.C++核心编程-引用</a><time datetime="2023-02-13T14:47:34.000Z" title="发表于 2023-02-13 22:47:34">2023-02-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/9368cbfc.html" title="010.C++核心编程-内存分区模型"><img src="https://p.ananas.chaoxing.com/star3/origin/b4c7f6d417c4c75ed02262f3549625c8.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="010.C++核心编程-内存分区模型"/></a><div class="content"><a class="title" href="/posts/9368cbfc.html" title="010.C++核心编程-内存分区模型">010.C++核心编程-内存分区模型</a><time datetime="2023-02-06T15:28:05.000Z" title="发表于 2023-02-06 23:28:05">2023-02-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/b056b485.html" title="009.C++基础实战-通讯录管理系统"><img src="https://p.ananas.chaoxing.com/star3/origin/5cdbcc7b75aea2aa3a8b12cae1439e99.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="009.C++基础实战-通讯录管理系统"/></a><div class="content"><a class="title" href="/posts/b056b485.html" title="009.C++基础实战-通讯录管理系统">009.C++基础实战-通讯录管理系统</a><time datetime="2023-02-04T10:02:31.000Z" title="发表于 2023-02-04 18:02:31">2023-02-04</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 扣小妖</div><div class="footer_custom_text"><p style="margin:10px 0 5px"><a target="_blank" href="https://hexo.io/" style="margin-inline:5px">博客 hexo</a><a target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px">主题 Butterfly</a><a target="_blank" href="https://gitee.com/" style="margin-inline:5px">托管 Gitee</a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://gcore.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://gcore.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script></div><script defer="defer" id="ribbon" src="https://gcore.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>